<template>
    <mi-list-page>

        <el-tabs model-value="" @tab-change="tabChange">
            <el-tab-pane label="全部" name=""></el-tab-pane>
            <el-tab-pane label="待付款" name="unpaid"></el-tab-pane>
            <el-tab-pane label="待发货" name="wait"></el-tab-pane>
            <el-tab-pane label="待收货" name="receive"></el-tab-pane>
            <el-tab-pane label="待评价" name="reply"></el-tab-pane>
            <el-tab-pane label="已完成" name="done"></el-tab-pane>
            <el-tab-pane label="已关闭" name="close"></el-tab-pane>
        </el-tabs>

        <mi-table :list="list" max-height="calc(100vh - 210px - 54px)">
            <template #topBar>

                <div class="d_flex flex_jc_sb">

                    <div></div>

<!--                    搜索组件    -->
                    <mi-search-page :search="search" placeholder="ID/订单号">
                        <el-form :model="search.info" ref="searchRef" :inline="true" label-width="68px">
                            <el-form-item label="会员" prop="user_id">
                                <user-select v-model="search.info.user_id" />
                            </el-form-item>

                            <el-form-item label="创建时间" prop="create_date">
                                <mi-date v-model="search.info.create_date"
                                         type="daterange"
                                         format="YYYY-MM-DD"
                                         value-format="YYYY-MM-DD"
                                />
                            </el-form-item>
                        </el-form>
                    </mi-search-page>

                </div>

            </template>

            <template #order="{row}">
                <div class="f12">
                    <div>{{row.order_no}}</div>
                    <div>{{orderService.orderType[row.order_type]?.title}}</div>
                    <el-tag effect="plain" size="small">{{orderService.orderStatus[row.order_status]?.title }}</el-tag>
                </div>
            </template>


            <template #user="{row}">
                <el-space class="f12" direction="vertical" alignment="start">
                    <div>{{ row.user?.nickname }}</div>
                    <div class="f_warning">{{row.user?.mobile}}</div>
                </el-space>
            </template>

            <template #product="{row}">

                <el-popover
                    placement="right"
                    :width="'auto'"
                    trigger="click"
                >
                    <template #reference>
                        <el-button link type="primary">查看</el-button>
                    </template>

                    <el-space class="f12" direction="vertical" alignment="start">
                        <el-space v-for="(item, i) in row.items" :key="i">
                            <mi-image shape="square" :src="item.goods_image" :width="32" :height="32" />
                            <div>
                                <div>
                                    {{item.goods_title}}
                                </div>
                                <div v-if="item.goods_sku">
                                    <el-tag size="small">{{item.goods_sku}}</el-tag>
                                </div>
                            </div>
                            <div class="f_secondary">x{{item.num}}</div>
                            <div class="f_danger">￥{{item.price}}</div>
                            <div class="f_danger">￥{{item.total_price}}</div>
                        </el-space>
                    </el-space>

                </el-popover>


            </template>

            <template #discount="{row}">
                <div class="f12">
                    <div>优惠券：{{row.coupon_price}}</div>
                    <div>积分抵扣：{{row.points_price}}</div>
                </div>
            </template>

            <template #pay="{row}">
                <div class="f12" v-if="row.pay_time">
                    <div>微信支付</div>
                    <div>实付：{{row.pay_price}}</div>
                    <div>时间：{{row.payTime}}</div>
                </div>
                <div v-else>未付款</div>
            </template>

            <template #delivery="{row}">
                <div class="f12">
                    <div>运费：{{row.postage_price}}</div>
                </div>
            </template>

            <template #send="{row}">
                <div class="f12" v-if="row.deliveryTime">
                    <div v-if="row.delivery_status == 1">已发货</div>
                    <div v-if="row.delivery_status == 2">部分发货</div>
                    <div>时间：{{row.deliveryTime}}</div>
                </div>
                <div v-else>未发货</div>
            </template>

            <template #toolbar="{row,$index}">
                <el-space wrap>
                    <order-delivery
                        v-auth="auth.edit"
                        v-if="row.order_status=='wait'"
                        v-model:order="list.items[$index]"
                    >
                        <el-button type="primary" round size="small" @click="lineToolbarEvent('delivery', row)" >立即发货</el-button>
                    </order-delivery>
                    <el-button link type="primary" @click="lineToolbarEvent('detail', row)" v-auth="auth.index">详情</el-button>
                </el-space>
            </template>

        </mi-table>

    </mi-list-page>


    <mi-dialog v-model="detail.show">
        <order-detail :id="list.currentRow?.id" />
    </mi-dialog>



</template>

<script setup lang="ts">
// toolbar 事件
import {provide, reactive, ref} from "vue";
import {makeModelAuth} from "@/utils/auth";
import global from "@/dict/global";
import List from "@/model/list";
import {FormInstance} from "element-plus";
import Search from "@/model/search";
import orderService from "@/service/order";
import OrderDelivery from "@/views/store/components/Order/OrderDelivery.vue";
import OrderDetail from "@/views/store/components/Order/Detail/OrderDetail.vue"
import UserSelect from "@/views/site/components/UserSelect.vue";


const restoreUrl = '/order/handle/type/restore'

const tdWidth = global.tdWidth
const auth = makeModelAuth('store.order')

const tabChange = (name:string) => {
    // 添加查询条件
    list.where.order_status = name
    list.reload(1)
}


const lineToolbarEvent = (event:string, row:any) => {
    switch (event) {
        case 'detail':
            list.currentRow = row
            detail.show = true
            break
    }
}

const list = reactive(new List({
    where:{delete: 'normal'},
    url: `/${auth.index}`,
    columns:[
        {name: "select", type:'selection'},
        {name: "id", title:'ID', width:tdWidth.id},
        {name: "order", title:'订单号', type:'slot', slot:'order', tooltip: false},
        // {name: "user", title:'用户信息', type:'slot', slot:'user'},
        {name: "product", title:'商品信息', type:'slot', slot:'product', tooltip: false, align:'center'},
        {name: "total_price", title:'订单金额', sort:true},
        {name: "discount", title:'优惠', type: 'slot', slot: 'discount'},
        {name: "pay", title:'付款信息', type:'slot', slot:'pay'},
        {name: "delivery", title:'配送信息', type:'slot', slot:'delivery'},
        {name: "send", title:'发货信息', type:'slot', slot:'send'},
        {name: "create_time", title:'创建时间', sort: true},
        {title: "操作", type:'slot', slot:'toolbar', fixed:'right'},
    ]
}))

const searchRef = ref<FormInstance>()
const search = reactive(new Search({
    list: list,
    searchRef:searchRef.value,
}))

const detail = reactive({
    show: false,
})


provide("list", list)

</script>

<style scoped>
.list_label{
    width: 5em;
    display: inline-block;
    text-align: right;
}
</style>
